<template>
  <div class="keyboard">
    <div class="top-input">
      <div class="title">{{ titleValue }}</div>
      <div class="money">￥{{ amount }}</div>
    </div>
    <div class="down-keybox">
      <div class="left-key">
        <div @click="handleClick('1')" class="number-key">1</div>
        <div @click="handleClick('2')" class="number-key">2</div>
        <div @click="handleClick('3')" class="number-key">3</div>
        <div @click="handleClick('4')" class="number-key">4</div>
        <div @click="handleClick('5')" class="number-key">5</div>
        <div @click="handleClick('6')" class="number-key">6</div>
        <div @click="handleClick('7')" class="number-key">7</div>
        <div @click="handleClick('8')" class="number-key">8</div>
        <div @click="handleClick('9')" class="number-key">9</div>
        <div @click="handleClick('0')" id="numb">0</div>
        <div @click="handleClick('.')" id="numb">.</div>
      </div>
      <div class="right-key">
        <div @click="handleDelete" class="tool-key">删除</div>
        <div @click="handleClear" class="tool-key">清空</div>
        <div @click="handleOk" id="tool-ok">OK</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useTagStore } from '@/store/tags'
import { useRecordStore } from '@/store/record'
const tagStore = useTagStore()
const recordStore = useRecordStore()
const route = useRoute()
const amount = ref('0')
const flag = ref(false)
const titleValue = computed(() => {
  if (route.path === '/note/income') {
    flag.value = true
    return tagStore.selectTag.income
  } else {
    flag.value = false
    return tagStore.selectTag.outcome
  }
})
const handleClick = (n: string) => {
  console.log(amount.value, route.path)
  if (n === '.') {
    if (amount.value.includes('.')) return
    amount.value += '.'
  } else {
    if (amount.value === '0') amount.value = n
    else amount.value += n
  }
}

const handleDelete = () => {
  if (amount.value.length > 1) {
    amount.value = amount.value.slice(0, -1)
  } else {
    amount.value = '0'
  }
}

const handleClear = () => {
  amount.value = '0'
}
function handleOk() {
  console.log(flag.value)
  const data = {
    name: titleValue.value,
    value: flag.value ? '+' + amount.value : -parseFloat(amount.value)
  }
  recordStore.setData(data, flag.value)
  handleClear()
}
</script>

<style scoped>
.top-input {
  display: flex;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.title {
  width: 25%;
  font-size: 16px;
}
.money {
  width: 75%;
  text-align: right;
  font-size: 25px;
  font-weight: 600;
}
.keyboard {
  height: 240px;
  background: hsla(0, 0%, 87.8%, 0.2);
  font-size: 16px;
}
.down-keybox {
  display: flex;
  text-align: center;
  cursor: default;
}
.left-key {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
}
#numb {
  width: 50%;
  height: 50px;
  line-height: 50px;
}
.right-key {
  display: flex;
  width: 25%;
  flex-direction: column;
}
#tool-ok {
  line-height: 100px;
}
.number-key,
.tool-key {
  height: 50px;
  line-height: 50px;
}
.number-key {
  width: calc(100% / 3);
}
</style>
